<script setup>
import { ref } from 'vue'
import { useVModel } from '@vueuse/core'
import { useRequest } from '@/hooks'
import { gamesApi } from '@/api'

const props = defineProps({
  modelValue: Boolean,
  detail: Object,
  accounts: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits(['submit', 'update:modelValue'])
const dialogVisible = useVModel(props, 'modelValue', emits)

const DEVICE_TYPE = [
  {
    label: '通用',
    value: 1
  }
]

const ruleForm = ref({
  deviceName: '',
  deviceId: '',
  deviceType: '',
  deviceMac: '',
  deviceStatus: 0,
  bindAnchor: '',
  gameId: ''
})
const rules = {
  deviceId: {
    required: true,
    message: '请输入设备ID',
    trigger: 'change'
  },
  deviceType: {
    required: true,
    message: '请选择设备类型',
    trigger: 'change'
  },
  deviceMac: {
    required: true,
    message: '请输入MAC地址',
    trigger: 'change'
  },
  deviceStatus: {
    required: true,
    message: '请选择在线状态',
    trigger: 'change'
  }
}

const ruleFormRef = ref()
const handleSubmit = async () => {
  await ruleFormRef.value.validate()
  emits('submit', ruleForm.value)
}

const handleClose = done => done()

const handleOpen = () => {
  ruleFormRef.value.resetFields()

  if (props.detail) {
    Object.assign(ruleForm.value, props.detail)
  }
}

const { data: games, refresh } = useRequest(gamesApi.selectGameList, {
  initialData: []
})

async function handleAcountChange(val) {
  ruleForm.value.gameId = ''
  val && (await refresh({ loginId: val }))
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    width="768px"
    :before-close="handleClose"
    :close-on-click-modal="false"
    v-bind="$attrs"
    @open="handleOpen"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="right"
      label-suffix="："
    >
      <el-form-item label="设备名称" prop="deviceName">
        <el-input v-model.trim="ruleForm.deviceName" clearable />
      </el-form-item>
      <el-form-item label="设备ID" prop="deviceId">
        <el-input v-model.trim="ruleForm.deviceId" clearable />
      </el-form-item>
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="ruleForm.deviceType" filterable clearable>
          <el-option
            v-for="item in DEVICE_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="MAC地址" prop="deviceMac">
        <el-input v-model.trim="ruleForm.deviceMac" clearable />
      </el-form-item>
      <el-form-item label="在线状态" prop="deviceStatus" required>
        <el-radio-group v-model="ruleForm.deviceStatus">
          <el-radio :value="1">在线</el-radio>
          <el-radio :value="0">离线</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属账号" prop="bindAnchor">
        <el-select
          v-model="ruleForm.bindAnchor"
          filterable
          clearable
          @change="handleAcountChange"
        >
          <el-option
            v-for="item in props.accounts"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="赛事列表" prop="gameId">
        <el-select v-model="ruleForm.gameId" filterable clearable>
          <el-option
            v-for="item in games"
            :key="item.id"
            :label="item.gameName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确认 </el-button>
    </template>
  </el-dialog>
</template>
